<template>
	<div class="spread con">
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/goods' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>成品列表</el-breadcrumb-item>
		</el-breadcrumb>
		
		 <span>商品货号:</span>
<el-input v-model="keyword" placeholder="请输入商品货号" style="width:20%"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handerSearch">搜索</el-button>
		
		 <el-button type="danger" @click="add()" style="float: right;">添加成品</el-button>
		<el-table
		    :data="tableData"
		    style="width: 100%" > 
		    
		    <el-table-column
		      label="商品 ID" >
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.id }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="商品货号" width="150">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.item_number }}</span>
		      	</template>
		    </el-table-column>
		  
		    <el-table-column
		      label="商品名称"  width="180">
		      <template slot-scope="scope">
		        	<span>{{ scope.row.title }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="商品价格">
		      <template slot-scope="scope">
		        	<span>{{ Math.round(scope.row.price,2) }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="日期"
		      width="200">
		      	<template slot-scope="scope">
		        	<i class="el-icon-time"></i>
		        	<span style="margin-left: 10px">{{ scope.row.create_time }}</span>
		      	</template>
		    </el-table-column> 
		    
		   <!-- <el-table-column
		      label="商品库存">
		      <template slot-scope="scope">
		        	<span>{{ scope.row.stock }}</span>
		      	</template>
		    </el-table-column>
		    -->
		    <el-table-column label="缩略图" width="180" align="center" prop="desc">
		      	<template slot-scope="scope">
		      		<img width="60" height="60" :src="scope.row.img_url">
		      	</template>
		    </el-table-column>
		    
		    <!--
		    <el-table-column
		      	label="详情"
		      	prop="title">
		      	<template slot-scope="scope">
		      		<span>{{scope.row.detail_text ? (scope.row.detail_text.substr(0,20)+"....") :  scope.row.detail_text}}</span>
		      	</template>
		    </el-table-column>
			-->
		    <el-table-column label="是否下架">
		      	<template slot-scope="scope">
		      		<el-tag type="success" v-if="scope.row.status">出售中</el-tag>
		      		<el-tag type="danger" v-else>已下架</el-tag>
		      	</template>
		    </el-table-column>

		    <el-table-column label="操作" width="280">
		      <template slot-scope="scope">
		        
		        <el-button type="primary" @click="handleEdit(scope.$index, scope.row)"  icon="el-icon-edit" circle></el-button>
		        
		        <el-button type="success"  @click="unGood(scope.$index, scope.row,0)" v-if="scope.row.status" icon="el-icon-check" circle></el-button>
		        <el-button type="success"  @click="unGood(scope.$index, scope.row,1)" v-else icon="el-icon-close" circle></el-button>
		       
		        <el-button type="danger" @click="handleDel(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
		         
		      </template>
		    </el-table-column>
		</el-table>
		
		<div class="block el-pagination" style="margin-top: 50px;"> 
 			<span class="el-pagination__total" style="margin-left: 20px;">共 {{page.total}} 条数据</span> 
 			<el-pagination background layout="prev, pager, next" :total="page.per_page" :page-size="page.size" @current-change="handleCurrentChange" :current-page.sync="page.currentPage"> 
 			</el-pagination>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		data(){
			return {
				tableData: [],
				keyword:'',
				page: {
					 total: 0,
					 size: 1, 
					 currentPage: 1,
					 num: 1 
					 },
			}
		},
		
		created(){
			this.getGoodsList();
		},
		methods:{
			getGoodsList(){
				axios.get('/api/good/getgoodslist?type=1&page='+ this.page.num +'&keyword='+this.keyword)
					.then(result => {
						//console.log(result);
						if(result.data.code == 200){
							this.tableData = result.data.result;
							this.page.total = result.data.total; 
 							//this.page.size = 1;  
 							this.page.per_page = result.data.last_page;
						}
					})
					.catch(error => {

					})
			},
			handleCurrentChange(val) {
                this.page.num = val;
                this.getGoodsList();
            },
            handerSearch(){
            	this.getGoodsList();
            	//console.log(this.keyword);
            },
			//添加商品
			add(){
			 this.$router.push({ path: '/goods/add'})
			},
			handleEdit(index, row) {
		        //console.log(index, row);
		        this.$router.push({ path: '/goods/detail/'+row.id})
		    },
		    handleDel(index,row){
		    	this.$confirm('您确定要删除该商品吗？', '确认信息', {
		          	distinguishCancelAndClose: true,
		          	confirmButtonText: '删除商品',
		          	cancelButtonText: '取消',
		          	type:"error"
		        })
		        .then(() => {
		            axios.post('/api/good/del',{_token:this.token,id:row.id})
					.then(result => {
						console.log(result);
						if(result.data.code == 200){
							this.tableData = result.data.result;
						}
						this.getGoodsList();
					})
					.catch(error => {

					})

		        })
		        .catch(action => {
		            
		        });
		    },
		    unGood(index, row,type) {
		        console.log(index, row);
		        axios.post('/api/good/un',{id:row.id,status:type})
		        	.then(res => {
		        		this.$message({
		        			type:"success",
		        			message:res.data.message
		        		})
		        		this.getGoodsList();
		        	})
		        	.catch(error => {
		        		console.log("遇到错误");
		        	})
		    }
		}
		
		
		
		
	}
	
</script>

<style lang="scss">
  	.el-table .warning-row {
    	background: oldlace;
  	}
  	.el-select .el-input {
    	width: 120px;
  	}
  	.input-with-select .el-input-group__prepend {
    	background-color: #fff;
  	}
  	.el-table .success-row {
    	background: #f0f9eb;
  	}
  	.con{
	    .el-breadcrumb{
	      	height: 40px;
	    }
  	}
</style>
